1.Ionic environment installation
Ionic development depends on the Nodejs environment, so we need to install Nodejs before development. Download and Install:The hyperlink login is visible.
After the installation is complete, open PowerShell and enter the commands node -v and npm -v to verify that the installation is successful, and if the version number is returned, it means that it is successful.
Execute in the PowerShell command line:
This is to install cordova and ionic using the npm package manager, -g means global installation, and after global installation, you can use cordova and ionic commands in any directory in PowerShell.
You may encounter the following error:
2. Create an Ionic project
Ionic's official website provides three project templates blank, tabs and sideMenu, please refer to:The hyperlink login is visible.
We create our app using the tabs template, open the PowerShell cd to the development directory, and execute:
where myApp is our project name
As shown below:
C:\project\android>ionic start myApp tabs
√ Creating directory .\myApp - done!
√ Downloading and extracting tabs starter - done!
? Would you like to integrate your new app with Cordova to target native iOS and Android? Yes
√ Personalizing ionic.config.json and package.json - done!
> ionic integrations enable cordova --quiet
√ Downloading integration cordova - done!
√ Copying integrations files to project - done!
[OK] Added cordova integration!
Installing dependencies may take several minutes.
* IONIC DEVAPP *
Speed up development with the Ionic DevApp, our fast, on-device testing mobile app
- Test on iOS and Android without Native SDKs
- LiveReload for instant style and JS updates
️--> Install DevApp:The hyperlink login is visible. <--
> npm i
× Running command - failed!
[ERROR]
>node-sass@4.9.0install C:\project\android\myApp\node_modules\node-sass
> node scripts/install.js
Downloading binary fromThe hyperlink login is visible.
Download complete
Binary saved to C:\project\android\myApp\node_modules\node-sass\vendor\win32-x64-57\binding.node
Caching binary to C:\Users\itsvse_pc\AppData\Roaming\npm-cache\node-sass\4.9.0\win32-x64-57_binding.node
>uglifyjs-webpack-plugin@0.4.6postinstall C:\project\android\myApp\node_modules\uglifyjs-webpack-plugin
> node lib/post_install.js
>node-sass@4.9.0postinstall C:\project\android\myApp\node_modules\node-sass
> node scripts/build.js
Binary found at C:\project\android\myApp\node_modules\node-sass\vendor\win32-x64-57\binding.node
Testing binary
Binary is fine
npm ERR! path C:\project\android\myApp\node_modules\fsevents\node_modules
npm ERR! code EPERM
npm ERR! errno -4048
npm ERR! syscall lstat
npm ERR! Error: EPERM: operation not permitted, lstat
'C:\project\android\myApp\node_modules\fsevents\node_modules'
npm ERR! { Error: EPERM: operation not permitted, lstat
'C:\project\android\myApp\node_modules\fsevents\node_modules'
npm ERR! stack: 'Error: EPERM: operation not permitted, lstat
\'C:\\project\\android\\myApp\\node_modules\\fsevents\\node_modules\'',
npm ERR! errno: -4048,
npm ERR! code: 'EPERM',
npm ERR! syscall: 'lstat',
npm ERR! path: 'C:\\project\\android\\myApp\\node_modules\\fsevents\\node_modules' }
npm ERR!
npm ERR! Please try running this command again as root/Administrator.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\itsvse_pc\AppData\Roaming\npm-cache\_logs\2018-06-19T06_52_38_238Z-debug.log
Error occurred,The solution is to run cmd as administrator, and then run the above command again！！
Use the CD to enter our project, and then run the following command to start the browser service:
After the execution is completed, Ionic will automatically help us open our default browser and jump to our application page, when the browser opens the page, Ionic has turned on the livereload mode for us, after opening it, we edit the file under www and save it, Ionic will notify the browser to refresh the page through the websocket,We don't have to manually refresh the page every time we make changes, and greatly improved our work efficiency.
As shown below:
|
Posted on 6/19/2018 3:07:03 PM
|
|
|
|
