foreword
I was using Vue before, but now I am using Angular for work reasons. They are the pits entered by Vue2 and Angular5 respectively. Just compare and summarize from the use, deepen memory and avoid confusion. What? You ask the similarities and differences of the realization principle and the advantages and disadvantages? This baby is still studying hard, maybe you can see the analysis post in your lifetime.
Regardless of the framework used, creating a project is the first step. Up to now, both Angular and Vue have official scaffolding to quickly create and configure projects.
Create project
Both Angular and Vue's scaffolding depend on NodeJs and Npm , so confirm your environment first. Both scaffolds need to be installed globally
//Angular-cli npm install -g angular-cli //vue-cli npm install -g vue-cli
You can use the version check command to confirm whether the installation is successful, ng -v or vue -V in the command line, if the version can be output normally, it means the installation is successful. Pay attention to the vue-cli version check, the parameter added after is a capital V.
Now you can start creating the project.
Angular-cli uses the ng new command to create a new project. You can specify the style at the time of creation, whether to bring routing, etc. ( detailed configuration ); after creation, the dependencies will be automatically installed by default , of course, you can also skip the installation by --skip-install .
After installing the dependencies, enter the directory, you can debug through the ng serve command, you can specify the host, port, whether to automatically open the browser, env, etc. ( detailed configuration ). env is used to manage configuration files, which will be mentioned later.
// Create an ngtest project and specify the scss style style ng new --style=scss ngtest
//After installing the dependencies, enter the directory
cd ngtest
//Debug
ng serve --open --port=3001
If the dependencies are normal, you will see the initial interface of the Angular project, and the project is created successfully.
Vue-cli uses vue init <template> <app-name> commands to create new projects. Scaffolding provides a variety of templates, you can choose the template as needed, generally use the webpack template. You can view all templates through the vue list command
// Create a Vue project vue init webpack vue- test // Enter the directory cd vue- test // Start debugging npm run dev
When creating a Vue project, there will be multiple prompts to guide the user to configure the project. If there is no special preference, you can go all the way by default.
Enter the project directory, npm run dev to debug the project, and you will see the initial interface of Vue normally.
Vue-cli can see the configuration files used by different commands in package.json, for example: the entry configuration file for dev is 'build/webpack.dev.conf.js', and the webpack configuration of Vue-cli is in the build directory. Referring to the configuration , you can gradually master the configuration in the scaffolding, and the scaffolding puts some common configurations in the config directory. Although Anguar is also based on webpack, the configuration of webpack can only be seen by exporting through ng eject , and the configuration of the project is completed in .angular-cli.json ( detailed configuration ).
Project structure
The directory structures of Angular and Vue are very similar, and the commonly used ones are the source code src directory and some configuration items.
Debug/Package
Vue-cli is debugged and packaged by modifying the configuration in the build directory; while Angular-cli configures parameters in the command line. According to the default command, there will be the following configurations, which of course can be changed according to requirements ( detailed configuration ). Regardless of the scaffolding, a careful understanding of webpack is necessary.
Angular-cli command new file
Angular-cli also provides the function of quickly creating a new file. You can create a new specified file ( detailed configuration ) through ng generate [type] [filename] . When creating a new file, you can configure it with parameters or directly in .angular-cli.json Configure it in the defaults of the configuration file. For example, when creating a component, you can configure the prefix of the component (prefix), whether it is imported into the module (skip-import), whether it is exported (export), whether it has a test file (spec), etc., which can save a lot of time. Of course, you can also specify the path ng gc test/test when creating, and create the test component in the test directory, of course, in the App directory.
